<!DOCTYPE html>
<html>
<!--雨量-->
<head>
    <meta charset="utf-8">
    <title>主页一</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../../js/libs/font-awesome/css/font-awesome.min.css" media="all">
    <link rel="stylesheet" href="../../layui/ThirdPageCss/public.css" media="all">
</head>
<style>
    .layui-top-box {padding:40px 20px 20px 20px;color:#fff}
    .panel {margin-bottom:17px;background-color:#fff;border:1px solid transparent;border-radius:3px;-webkit-box-shadow:0 1px 1px rgba(0,0,0,.05);box-shadow:0 1px 1px rgba(0,0,0,.05)}
    .panel-body {padding:15px}
    .panel-title {margin-top:0;margin-bottom:0;font-size:14px;color:inherit}
    .label {display:inline;padding:.2em .6em .3em;font-size:75%;font-weight:700;line-height:1;color:#fff;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.25em;margin-top: .3em;}
    .layui-red {color:red}
    .main_btn > p {height:40px;}
</style>
<body>
<div class="layuimini-container">
    <div class="layuimini-main layui-top-box">
        <div class="layui-row layui-col-space10">

            <div class="layui-col-md3">
                <div class="col-xs-6 col-md-3">
                    <div class="panel layui-bg-cyan">
                        <div class="panel-body">
                            <div class="panel-title">
                                <span class="label pull-right layui-bg-blue">实时</span>
                                <h5>近七天下雨天数</h5>
                            </div>
                            <div class="panel-content">

                                <h1 class="no-margins">2天</h1>
                                <div class="stat-percent font-bold text-gray"><i class="fa fa-commenting"></i> </div>
                                <small>当前分类总记录数</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-col-md3">
                <div class="col-xs-6 col-md-3">
                    <div class="panel layui-bg-blue">
                        <div class="panel-body">
                            <div class="panel-title">
                                <span class="label pull-right layui-bg-cyan">实时</span>
                                <h5>近七天雨量总计</h5>
                            </div>
                            <div class="panel-content">
                                <h1 class="no-margins">543.1毫米</h1>
                                <div class="stat-percent font-bold text-gray"><i class="fa fa-commenting"></i> </div>
                                <small>当前分类总记录数</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-col-md3">
                <div class="col-xs-6 col-md-3">
                    <div class="panel layui-bg-green">
                        <div class="panel-body">
                            <div class="panel-title">
                                <span class="label pull-right layui-bg-orange">实时</span>
                                <h5>今日雨量</h5>
                            </div>
                            <div class="panel-content">
                                <h1 class="no-margins">0毫米</h1>
                                <div class="stat-percent font-bold text-gray"><i class="fa fa-commenting"></i> </div>
                                <small>当前分类总记录数</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md3">
                <div class="col-xs-6 col-md-3">
                    <div class="panel layui-bg-orange">
                        <div class="panel-body">
                            <div class="panel-title">
                                <span class="label pull-right layui-bg-green">实时</span>
                                <h5>当前是否下雨</h5>
                            </div>
                            <div class="panel-content">
                                <h1 class="no-margins">否</h1>
                                <div class="stat-percent font-bold text-gray"><i class="fa fa-commenting"></i> </div>
                                <small>当前分类总记录</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="layui-box">
        <div class="layui-row layui-col-space10">
            <div class="layui-col-md12" style="width:1000px; height:400px" id="main"></div>
            <div id="rain" class="rain"></div>
        </div>
    </div>

    <div class="layui-box">
        <div class="layui-row layui-col-space10">
            <div class="layui-col-md6">
                <table class="layui-table">
                    <colgroup>
                        <col width="150">
                        <col width="200">
                        <col>
                    </colgroup>
                    <thead>
                    <tr>
                        <th>天气</th>
                        <th>时间</th>
                        <th>雨量</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>晴天</td>
                        <td>2021-11-29</td>
                        <td>0毫米</td>
                    </tr>
                    <tr>
                        <td>小雨</td>
                        <td>2021-11-28</td>
                        <td>20毫米</td>
                    </tr>
                    <tr>
                        <td>大雨</td>
                        <td>2021-11-27</td>
                        <td>100毫米</td>
                    </tr>
                    <tr>
                        <td>阴天</td>
                        <td>2016-11-26</td>
                        <td>0毫米</td>
                    </tr>
                    <tr>
                        <td>阴天</td>
                        <td>2016-11-25</td>
                        <td>0毫米</td>
                    </tr>
                    <tr>
                        <td>阴天</td>
                        <td>2016-11-24</td>
                        <td>0毫米</td>
                    </tr>
                    <tr>
                        <td>阴天</td>
                        <td>2016-11-23</td>
                        <td>0毫米</td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <div class="layui-col-md6">
                <ul class="layui-timeline">
                    <h3 class="layui-timeline-title">未来三天天气预报</h3>
                    <li class="layui-timeline-item">
                        <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                        <div class="layui-timeline-content layui-text">
                            <h3 class="layui-timeline-title">12月2日</h3>
                            <p>
                                晴天
                            <ul><li>雨量估计为0毫米</li></ul>

                            </p>
                        </div>
                    </li>
                    <li class="layui-timeline-item">
                        <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                        <div class="layui-timeline-content layui-text">
                            <h3 class="layui-timeline-title">12月1日</h3>
                            <p>
                                晴天
                            <ul><li>雨量估计为0毫米</li></ul>

                            </p>
                        </div>
                    </li>
                    <li class="layui-timeline-item">
                        <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                        <div class="layui-timeline-content layui-text">
                            <h3 class="layui-timeline-title">11月30号</h3>
                            <p>
                                         晴天
                               <ul><li>雨量估计为0毫米</li></ul>

                            </p>
                        </div>
                    </li>
                    <li class="layui-timeline-item">

                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
<script src="../../layui/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script type="text/javascript" src="../../js/echarts/echarts.min.js"></script>
<script src="../../js/libs/jquery-2.1.1.min.js"></script>
<script src="../../js/farm/rain.js"></script>
<script type="text/javascript">
    var ROOT_PATH =
        'https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples';

    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    var option;

    const weatherIcons = {
        Sunny: ROOT_PATH + '/data/asset/img/weather/sunny_128.png',
        Cloudy: ROOT_PATH + '/data/asset/img/weather/cloudy_128.png',
        Showers: ROOT_PATH + '/data/asset/img/weather/showers_128.png'
    };
    const seriesLabel = {
        show: true
    };
    option = {
        title: {
            text: 'Weather Statistics'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {
            data: ['早上', '中午', '晚上']
        },
        grid: {
            left: 100
        },
        toolbox: {
            show: true,
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'value',
            name: 'Days',
            axisLabel: {
                formatter: '{value}'
            }
        },
        yAxis: {
            type: 'category',
            inverse: true,
            data: ['Sunny', 'Cloudy', 'Showers'],
            axisLabel: {
                formatter: function (value) {
                    return '{' + value + '| }\n{value|' + value + '}';
                },
                margin: 20,
                rich: {
                    value: {
                        lineHeight: 30,
                        align: 'center'
                    },
                    Sunny: {
                        height: 40,
                        align: 'center',
                        backgroundColor: {
                            image: weatherIcons.Sunny
                        }
                    },
                    Cloudy: {
                        height: 40,
                        align: 'center',
                        backgroundColor: {
                            image: weatherIcons.Cloudy
                        }
                    },
                    Showers: {
                        height: 40,
                        align: 'center',
                        backgroundColor: {
                            image: weatherIcons.Showers
                        }
                    }
                }
            }
        },
        series: [
            {
                name: '早上',
                type: 'bar',
                data: [165, 170, 30],
                label: seriesLabel,
                markPoint: {
                    symbolSize: 1,
                    symbolOffset: [0, '50%'],
                    label: {
                        formatter: '{a|{a}\n}{b|{b} }{c|{c}}',
                        backgroundColor: 'rgb(242,242,242)',
                        borderColor: '#aaa',
                        borderWidth: 1,
                        borderRadius: 4,
                        padding: [4, 10],
                        lineHeight: 26,
                        // shadowBlur: 5,
                        // shadowColor: '#000',
                        // shadowOffsetX: 0,
                        // shadowOffsetY: 1,
                        position: 'right',
                        distance: 20,
                        rich: {
                            a: {
                                align: 'center',
                                color: '#fff',
                                fontSize: 18,
                                textShadowBlur: 2,
                                textShadowColor: '#000',
                                textShadowOffsetX: 0,
                                textShadowOffsetY: 1,
                                textBorderColor: '#333',
                                textBorderWidth: 2
                            },
                            b: {
                                color: '#333'
                            },
                            c: {
                                color: '#ff8811',
                                textBorderColor: '#000',
                                textBorderWidth: 1,
                                fontSize: 22
                            }
                        }
                    },

                }
            },
            {
                name: '中午',
                type: 'bar',
                label: seriesLabel,
                data: [150, 105, 110]
            },
            {
                name: '晚上',
                type: 'bar',
                label: seriesLabel,
                data: [220, 82, 63]
            }
        ]
    };

    option && myChart.setOption(option);

</script>
</body>
</html>